<template>
  <el-menu
    class="el-menu-demo"
    mode="horizontal"
    text-color="#316AB6"
    style="font-weight:bold;"
    :router="true"
    :default-active="$route.path"
    active-text-color="#3D73BA"
  >
    <el-link
      href="http://www.usst.edu.cn/"
      target="_blank"
    >
      <img
        height="60px"
        src="../../../assets/img/usst.jpg"
        alt
        style="margin-left:-30px"
      />
    </el-link>
    <el-menu-item style="text-decoration-line:none;margin-left:-20px">
      <router-link to='/home'>首页</router-link>
    </el-menu-item>

    <el-menu-item style="text-decoration-line:none;margin-left:-40px">
      <router-link to='//question_set'>问题集</router-link>
    </el-menu-item>

    <el-menu-item style="text-decoration-line:none;margin-left:-40px">
      <router-link to='/find_mate'>寻找队友</router-link>
    </el-menu-item>

    <el-menu-item style="text-decoration-line:none;margin-left:-40px">
      <router-link to='/contest'>赛事资讯</router-link>
    </el-menu-item>

    <el-menu-item style="text-decoration-line:none;margin-left:-40px">
      <router-link to='/user'>个人中心</router-link>
    </el-menu-item>
    <div style="display: flex;align-items: center;margin-left:-20px">
      <el-input
        v-model="input"
        placeholder="请搜索输入内容"
        size="small"
        style="padding: 15px;"
        @keyup.enter.native='search(input)'
      ></el-input>
      <el-button
        type="success"
        icon="el-icon-search"
        size="small"
        @click="search(input)"
        plain
        round
      >搜索</el-button>
    </div>

    <div style="display: flex;align-items: center;">
      <el-button
        type="danger"
        round
        @click="ask_question"
      >我要提问 !</el-button>
    </div>

    <div>
      <div
        v-if="islogin"
        style="display: flex;flex-direction: row;align-items: center;margin-top:13px"
      >
        <UserLogin></UserLogin>
        <!-- <el-badge
          :value="12"
          style="margin-left:20px;line-height:35px;"
        >
          <el-button size="small">回复</el-button>
        </el-badge> -->
      </div>
      <Loginning
        v-else
        style="height:60px;"
      ></Loginning>
    </div>
  </el-menu>
</template>

<script>
import UserLogin from 'components/content/login/UserLogin'
import Loginning from 'components/content/login/Loginning'

export default {
  name: 'Menu',
  components: {
    UserLogin,
    Loginning
  },
  // watch: {
  //   '$route'(to,from){
  //     this.$router.go(0)
  //   }
  // },
  data () {
    return {
      input: '',
      show: 'false',
      islogin: !!window.sessionStorage.getItem('token')
    }
  },
  methods: {
    search (input) {
      this.$router.push({
        name: 'Search', // 页面名字
        path: '/search', // 页面路劲 和上面名字任意一个都可以
        query: { keyword: JSON.stringify(input) } // 参数传值
      })
      this.input = ''
    },
    ask_question () {
      this.$router.push('/ask_question')
    }
  }
}
</script>

<style lang = "less" scoped>
.el-menu {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  width: 100%;
}
</style>
